<template>
	<view class="header">
		<view class="header-top">
			<view class="text-One">
				<fui-text text="配送至: 哈尔滨华德学院东门" color="#000" fontWeight="500" block></fui-text>
			</view>
			<view class="text-Two">
				<fui-text text="第二天中午可到达,连续七天配送" size="24" color="#383838" block></fui-text>
			</view>
		</view>
		<scroll-view class="content" scroll-y>
			<view class="container">
				<view  class="item">
					<image class="item-image" src="https://i-blog.csdnimg.cn/direct/60ad36a86df649dcbb6d3553bf3e5e48.png"></image>
					<view class="item-details">
						<view class="item-title">至减周卡</view>
						<view class="item-price">¥168</view>
						<view class="item-description">好吃</view>
						<view class="item-quantity">x1</view>
					</view>
				</view>
			</view>
			<view class="header-three" @click="goYouHui" v-if="couponsID==''">
				<fui-list>
					<fui-list-cell :highlight="false" arrow="true">
						<view style="display: flex; align-items: center; width: 100%;">
							<image src="https://zjdemo.xuande.work:8889/photo/089b9d68057e4906916a7a40b3fa3e55.png"
								style="width: 20px; height: 20px; margin-right: 10px;" />
							<text style="flex: 1;">至减券</text>
							<text style="color: #B2B2B2;">请选择优惠券</text>
						</view>
					</fui-list-cell>
				</fui-list>
			</view>
			<view class="header-three" @click="goYouHui" v-else>
				<fui-list>
					<fui-list-cell :highlight="false" arrow="true">
						<view style="display: flex; align-items: center; width: 100%;">
							<image src="https://zjdemo.xuande.work:8889/photo/089b9d68057e4906916a7a40b3fa3e55.png"
								style="width: 20px; height: 20px; margin-right: 10px;" />
							<text style="flex: 1;">至减券</text>
							<text style="color: #B2B2B2;">已选择{{quan[1]}}</text>
						</view>
					</fui-list-cell>
				</fui-list>
			</view>
			<view class="payment-container">
				<view class="payment-title">支付方式</view>
				<radio-group @change="onRadioChange">

					<label class="radio-item">
						<view class="payment-option">
							<image src="https://i-blog.csdnimg.cn/direct/fec9eccb400041c6b1a450d43c8f2b85.png"
								class="wechat-icon">
							</image>
							<text>微信支付</text>
						</view>
						<radio value="wechat" color="#000000" @click="isWechat"></radio>
					</label>
				</radio-group>
			</view>
			<view class="custom-container">
				<view class="label">联系电话</view>
				<input class="input-field" @input="numberFixedDigit" v-model="PayPhone" type="number"
					placeholder="请输入电话" maxlength="11" />
				<image class="edit-icon" src="https://i-blog.csdnimg.cn/direct/3a32d1aeeffb40d2a60e0c3fc45fdb11.png" />
			</view>
			<view class="custom-container">
				<view class="label">公寓备注</view>
				<input class="input-field" v-model="payBeiZhu" type="text" placeholder="请输入公寓备注" />
				<image class="edit-icon" src="https://i-blog.csdnimg.cn/direct/f76e512e03884062a8df55b384d3756e.png" />
			</view>
		</scroll-view>
	</view>
	<view class="bottom-section" v-if="couponsID==''">
		<text>待支付 ¥{{ allPrice }}</text>
		<button class="pay-button" @click="gopay">支付</button>
	</view>
	<view class="bottom-section" v-else>
		<text>待支付 ¥{{ youhuiFloat }}</text>
		<button class="pay-button" @click="gopay">支付</button>
	</view>

</template>

<script>
	import {
		url
	} from '@/utils/request.js'
	import {
		ref,
		onMounted,
		watch,
		computed
	} from 'vue';
	export default {
		data() {
			return {
				allPrice: '',
				cartItems: [],
				cartItemss: [],
				quan: [],
				couponsID: '',
				allPrices: '', //打折之后的价格
				payBeiZhu: '',
				youhuiFloat:0,
				PayPhone: '',
				id: '',
				num: '',
				numbers: '',
				youhuiprice: '',
				isWeChatButton: false,
				isWechatNumber: 0,
			};
		},
		methods: {
			isWechat() {
				this.isWeChatButton = true
			},
			onRadioChange(e) {
				console.log("eee" + e.detail.value);
			},
			gopay() {
				if (this.isWeChatButton === false) {
					uni.showModal({
						title: '提示',
						content: '请选择支付方式',
						showCancel: false,
						success: function() {
							// 置空style  否则动画不生效

						}
					});
				} else if (this.PayPhone == '') {
					uni.showModal({
						title: '提示',
						content: '请输入电话后才能购买',
						showCancel: false,
						success: function() {
							// 置空style  否则动画不生效

						}
					});

				} else if (this.payBeiZhu == '') {
					uni.showModal({
						title: '提示',
						content: '请输入备注后才能购买',
						showCancel: false,
						success: function() {
							// 置空style  否则动画不生效

						}
					});
				} else {
					const ids = [];
					const nums = [];
					console.log("你好啊啊啊" + this.Payname);
					this.cartItems.forEach(item => {
						ids.push(item.id);
						nums.push(item.number);
					});
					this.id = ids.join(',');
					this.num = nums.join(',');

					console.log("Cart Items: ", this.cartItems);
					console.log("Pay Name: " + this.Payname);
					console.log("IDs: ", this.id);
					console.log("Nums: ", this.num);

					const that = this
					const price = (this.couponsID == '') ? this.allPrice : this.allPrices
					console.log("价格" + price)
					uni.getStorage({
						key: 'openId',
						success: function(res) {
							uni.request({
								url: url + 'foodCombo/createWeekMember',
								method: 'GET',
								data: {
									openId: res.data
								},
								success: (res) => {
									wx.requestPayment({
										nonceStr: res.data.data.nonceStr,
										package: res.data.data.packageVal,
										paySign: res.data.data.paySign,
										prepayid: res.data.data.prepayId,
										timeStamp: res.data.data.timeStamp,
										signType: res.data.data.signType,
										success(res) {
											uni.showModal({
												content: "支付成功",
												showCancel: false
											})
											console.log("支付" + res);
											uni.switchTab({
												url: '../zhiCard/zhiCard',
											})
										},
										fail(e) {
											uni.showModal({
												content: "支付失败，请稍后重试",
												showCancel: false
											})
											console.log(e.errMsg);
										}
									});
								}
							});
							console.log(res.data);
						}
					});

				}
			},

			goYouHui() {
				uni.navigateTo({
					url: '../YouHui/YouHui'
				})
			},
			getValue(value, index) {
				let that = this;
				this.quan[index] = value;

				if (this.quan.length === 2 && this.quan[0] && this.quan[1]) {
					this.couponsID = this.quan[0]
					console.log(this.quan[0], "优惠密码")
					console.log(this.quan[1], 'B页面传递的数据');
					if (this.quan[1] === "八折券") {
						that.youhuiprice = 0.8
						console.log(this.youhuiprice)
					} else if (this.quan[1] === "九折券") {
						that.youhuiprice = 0.9
						console.log(this.youhuiprice)
					} else if (this.quan[1] === "七折券") {
						that.youhuiprice = 0.7
						console.log(this.youhuiprice)
					}
				}
			}
		},
		watch: {
			youhuiprice(newVal, oldVal) {
				console.log(newVal, "iii");
				console.log(this.allPrices, "aaa")
				console.log(this.allPrice, "BBB")
				this.allPrices = this.allPrice * this.youhuiprice;
				this.youhuiFloat = Number(parseFloat(this.allPrices).toFixed(2))
			}
		},
		numberFixedDigit(e) {
			e.target.value = e.target.value.replace(/^0|[^\d]|[.]/g, '')
			this.$nextTick(() => {
				this.number = e.target.value
			})
		},
		onLoad: function(options) {

			this.allPrice = options.allPrice;
			this.allPrices = options.allPrice * this.youhuiprice;

			this.cartItems = JSON.parse(decodeURIComponent(options.cartItems));
			this.cartItemss = JSON.parse(decodeURIComponent(options.cartItemss));
			console.log(this.cartItems)
			console.log(this.cartItemss)
		},
		computed: {
			combineCartItems() {
				return [
					...this.cartItems, // Combos from Combo
					...this.cartItemss // Single items from Combos
				];
			}

		},
	};
</script>

<style>
	.custom-container {
		display: flex;
		align-items: center;
		padding: 10px;
		border-bottom: 1px solid #eaeaea;
	}

	.label {
		flex: 1;
		font-size: 16px;
		color: #333;
	}

	.input-field {
		flex: 2;
		font-size: 16px;
		color: #333;
		border: none;
		outline: none;
	}

	.edit-icon {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}

	.payment-container {
		padding: 20px;
		height: 71px;
		background-color: #ffffff;
	}

	.payment-title {
		font-size: 18px;
		margin-bottom: 20px;
	}

	.radio-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.payment-option {
		display: flex;
		align-items: center;
	}

	.wechat-icon {
		width: 24px;
		height: 24px;
		margin-right: 10px;
	}


	.header {
		background-color: white;
		margin: 0 10px;
	}

	.header-top {
		height: 79px;
		background-color: white;
	}

	.text-One {
		padding-top: 10px;
		margin-left: 12px;
	}

	.text-Two {
		margin-top: 10px;
		margin-left: 12px;
	}

	body {
		margin: 0;
		padding: 0;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.content {
		flex: 1;
		overflow-y: auto;
		padding-bottom: 60px;
		/* Ensure content is not hidden behind the bottom section */
	}

	.bottom-section {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		background-color: #f8f8f8;
		border-top: 1px solid #e8e8e8;
		z-index: 1000;
		/* Ensure it stays on top */
	}

	.pay-button {
		background-color: black;
		color: white;
		margin-right: 38px;
		width: 120px;
		border-radius: 5px;
	}

	.container {
		margin-top: 10px;
		padding: 16px;
		background-color: #fff;
	}

	.item {
		display: flex;
		padding-bottom: 16px;

	}

	.item-image {
		width: 80px;
		height: 80px;
		margin-right: 16px;

	}

	.item-details {
		flex: 1;
	}

	.item-title {
		font-size: 16px;
		font-weight: bold;

	}

	.item-price {
		color: #f56c6c;
		font-size: 16px;

	}

	.item-description {
		font-size: 14px;
		color: #666;

	}

	.item-quantity {
		font-size: 14px;
		color: #999;
	}

	.options {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px 0;
	}

	.option-icon {
		font-size: 20px;
		margin-right: 8px;
	}

	.option-description {
		margin-top: -8px;
		flex: 1;
		margin-left: -8px;
		font-size: 14px;
		color: #999;
	}

	.option-select {
		color: #ff9900;
		font-size: 14px;
	}
</style>